import React from 'react';
import s from './style.module.css';
import echarts from 'echarts';
const max = 100;

export default function chart({ chartD = { data: {}, score: 0 } }) {
  const chart2SpanColor = () => {
    const djObj = { CRITICAL:'严重',HIGH: '高危', MEDIUM: '中危', LOW: '低危' };
    const colorArr = { CRITICAL: '#a11212', HIGH: '#ff0000', MEDIUM: '#f67e23', LOW: '#fed831' };
    return (
      <>
        {/* <p>
          <span className={s.legendC} style={{ 'background-color': '#a11212' }}></span>
          严重：
          <span>0</span>
        </p> */}
        {Object.entries(chartD.data).map(([key, val]) => {
          if(djObj[key]){
            return (
              <p key={key}>
                <span className={s.legendC} style={{ 'background-color': colorArr[key] }}></span>
                {djObj[key] + '：'}
                <span>{val}</span>
              </p>
            );
          }
          
        })}
      </>
    );
  };
  const scoreText = (score) => {
    if (score > 75) {
      return { t: '严重', c: '#a11212' };
    } else if (score > 50) {
      return { t: '高危', c: '#ff0000' };
    } else if (score > 25) {
      return { t: '中危', c: '#f67e23' };
    } else if (score > 0) {
      return { t: '低危', c: '#fed831' };
    } else if (score === 0) {
      return { t: '安全', c: '#11ab4e' };
    }else{
      return { t: '未知', c: '#ccc' };
    }
  };
  React.useEffect(() => {
    const value = chartD.score;
    const option = {
      angleAxis: {
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        min: 0,
        max: 200,
        startAngle: 180,
      },
      radiusAxis: {
        type: 'category',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      polar: {
        radius: '100%',
      },
      series: [
        //深线
        {
          type: 'bar',
          data: [, , value],
          z: 1,
          coordinateSystem: 'polar',
          barMaxWidth: 15,
          roundCap: true,
          itemStyle: {
            normal: {
              color: function (params) {
                let colorArr = [];
                if (params.data < 25) {
                  colorArr = [
                    {
                      offset: 0,
                      color: '#fed831',
                    },
                  ];
                } else if (params.data < 50) {
                  colorArr = [
                    {
                      offset: 0,
                      color: '#fed831',
                    },
                    {
                      offset: 1,
                      color: '#f67e23',
                    },
                  ];
                } else if (params.data < 75) {
                  colorArr = [
                    {
                      offset: 0,
                      color: '#fed831',
                    },
                    {
                      offset: 0.5,
                      color: '#f67e23',
                    },
                    {
                      offset: 1,
                      color: '#ff0000',
                    },
                  ];
                } else {
                  colorArr = [
                    {
                      offset: 0,
                      color: '#fed831',
                    },
                    {
                      offset: 0.5,
                      color: '#f67e23',
                    },
                    {
                      offset: 0.75,
                      color: '#ff0000',
                    },
                    {
                      offset: 1,
                      color: '#a11212',
                    },
                  ];
                }
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorArr);
              },
            },
          },
        },
        //背筐底
        {
          type: 'bar',
          data: [, , max],
          z: 0,
          silent: true,
          coordinateSystem: 'polar',
          barMaxWidth: 20,
          name: 'C',
          roundCap: true,
          color: '#f4f8ff',
          barGap: '-120%',
        },
        //刻度
        {
          type: 'gauge',
          radius: '75%',
          splitNumber: 5,
          max: 100,
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            // 坐标轴线
            lineStyle: {
              // 属性lineStyle控制线条样式
              color: [
                [0, '#DE585D'],
                [1, '#DE585D'],
              ],
              opacity: 0, //刻度背景
            },
          },
          data: [{ name: '当前风险值', value: value }],
          splitLine: {
            length: 10, //长刻度节点线长度
            lineStyle: {
              width: 2,
              color: '#f2f7fc',
            }, //刻度节点线
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#f2f7fc',
              width: 2,
            },
            length: 4,
            splitNumber: 2,
          },
          axisLabel: {
            show: false,
          },
          pointer: {
            show: false,
          },
          title: {
            show: false,
          },
          detail: {
            show: false,
          },
        },
        //头
        {
          type: 'pie',
          radius: ['91%', '70%'],
          hoverAnimation: false,
          startAngle: 180,
          data: [
            {
              name: '',
              value: value / max,
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                // color: '#ccc',
              },
            },
            {
              //画中间的图标
              name: '',
              value: 0,
              label: {
                position: 'inside',
                backgroundColor: '#fec49f',
                borderRadius: 8,
                padding: [16, 1.5, 16, 1.5],
                borderWidth: 0,
                rotate: 90 - (180 * value) / 100,
              },
            },
            {
              //画中间的图标
              name: '',
              value: 0,
              label: {
                position: 'inside',
                backgroundColor: '#fff',
                borderRadius: 5,
                padding: 4,
                borderWidth: 0,
                borderColor: '#fff',
              },
            },
            {
              name: '',
              value: 2 - value / max,
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: 'rgba(255,255,255,0)',
              },
            },
          ],
        },
      ],
      tooltip: {
        show: false,
      },
    };
    const chart = echarts.init(document.getElementById('chart'));
    chart.setOption(option, true);
    chart.resize();
  }, [chartD]);
  return (
    <div className={s.chartMain}>
      <p className={s.title}>风险值</p>
      <div className={s.chartBox}>
        <div className={s.chart}>
          <div id="chart" style={{ width: '16rem', height: '16rem' }}></div>
        </div>
        <div className={s.chartAdorn}>
          <div className={s.chartAdorn2}>
            <span>当前风险值</span>
            <span style={{ color: scoreText(chartD.score).c }}>
              {chartD.score < 0 ? '--' : chartD.score}
            </span>
            <span style={{ background: scoreText(chartD.score).c }}>
              { scoreText(chartD.score).t}
            </span>
          </div>
        </div>
      </div>
      <div className={s.legendBox}>{chart2SpanColor()}</div>
    </div>
  );
}
